<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>20以内的加减运算</title>
    <style>
        p {
            color: #e91e63;
            font-weight: bold;
            font-size: 30px;
            line-height: 60px;
            margin: 0;
            padding: 0;
            text-shadow: 1px 1px 0px #fff, -1px -1px 0px #fff, 1px -1px 0px #fff, -1px 1px 0px #fff;
        }

        p:nth-child(even) {
            background-color: rgba(255, 204, 204, .8);
        }

        .info h3 {
            text-align: center;
        }

        .info p {
            font-size: 14px;
        }


        #main {
            border-top: 2px solid #ff5722;
            margin-top: 10px;

        }

        .mainbg {
            background: url(./images/mini.jpg) no-repeat;
            background-size: contain;
            background-attachment: fixed;
            background-position: center;
        }

        span {
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #fb8a8a;
            font-size: 16px;
            line-height: 30px;
            text-align: center;
            vertical-align: text-bottom;
            color: #fff;
            margin: 0 20px 0 40px;
            font-weight: normal;
            text-shadow: none;

        }

        span::before {
            counter-increment: chapter;
            content: counter(chapter);
        }

        body {
            counter-reset: chapter;
        }
    </style>
</head>

<body class="mainbg">
    <h3>20以内加减运算</h3>

    <form style="float:left">
        请选择题目类型:
        <select name="tiType" id="tiType">
            <option>-</option>
            <option value="1">两个数相加</optiom>
            <option value="2">两个数相减</optiom>
            <option value="3">三个数连加</optiom>
            <option value="4">三个数连减</optiom>
            <option value="5">三个数先加后减</optiom>
            <option value="6">三个数先减后加</optiom>
            <option value="7">随机出题</optiom>
        </select>
    </form>
    <form style="float:left;">
        请选择题目数量:
        <select name="tiNum" id="tiNum">
            <option>-</option>
            <option value="10">10题</optiom>
            <option value="20">20题</optiom>
            <option value="30">30题</optiom>
            <option value="40">40题</optiom>
            <option value="50">50题</optiom>
            <option value="100">100题</optiom>
        </select>
    </form>
    <button style="margin-left: 20px;">开/关背景</button>
    <br style="clear: both;" />
    <div id="main"></div>
    <script>
        let main = document.body;
        let div = document.querySelector('div')
        let btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            main.classList.toggle('mainbg')
        })
        //1.两个数相加
        const arr1 = []
        for (let a = 2; a <= 20; a++) {
            for (let b = 2; b <= 20; b++) {
                if (a + b <= 20) {
                    arr1[arr1.length] = a + ' + ' + b + ' = ';
                }
            }
        }

        //2.两个数相减
        const arr2 = [];
        for (let a = 2; a <= 20; a++) {
            for (let b = 2; b <= 20; b++) {
                if (a > b) {
                    arr2[arr2.length] = a + ' - ' + b + ' = ';
                }
            }
        }

        //3.三个数运算（连加）
        const arr3 = [];
        for (let a = 1; a <= 20; a++) {
            for (let b = 1; b <= 20; b++) {
                for (let c = 1; c <= 20; c++) {
                    if (a + b + c <= 20) {
                        arr3[arr3.length] = a + ' + ' + b + ' + ' + c + ' = ';
                    }
                }
            }
        }

        //4.三个数运算（连减）
        const arr4 = [];
        for (let a = 1; a <= 20; a++) {
            for (let b = 1; b <= 20; b++) {
                for (let c = 1; c <= 20; c++) {
                    if (a - b - c >= 0) {
                        arr4[arr4.length] = a + ' - ' + b + ' - ' + c + ' = ';
                    }
                }
            }
        }
        //5.三个数运算（先加后减）
        const arr5 = [];
        for (let a = 1; a <= 20; a++) {
            for (let b = 1; b <= 20; b++) {
                for (let c = 1; c <= 20; c++) {
                    if (a + b >= c && a + b <= 20) {
                        arr5[arr5.length] = a + ' + ' + b + ' - ' + c + ' = ';
                    }
                }
            }
        }

        //6.三个数运算（先减后加）
        const arr6 = [];
        for (let a = 1; a <= 20; a++) {
            for (let b = 1; b <= 20; b++) {
                for (let c = 1; c <= 20; c++) {
                    if (a - b > c) {
                        arr6[arr6.length] = a + ' - ' + b + ' + ' + c + ' = ';
                    }
                }
            }
        }

        //7.随机出题
        const arr7 = [...arr1, ...arr2, ...arr3, ...arr4, ...arr5, ...arr6]

        //出题部分
        const tiType = document.getElementById("tiType");
        const tiNum = document.getElementById("tiNum");


        tiType.addEventListener('change', function () {
            const getArr = eval('arr' + this.value)
            tiNum.addEventListener('change', function () {

                const b = this.value;
                let timu = [];
                div.innerHTML = '';

                for (let t = 0; t < b; t++) {
                    let num = Math.floor(Math.random() * getArr.length);
                    timu[timu.length] = getArr[num];
                    getArr.splice(num, 1);
                    timu = timu.filter(Boolean);

                }
                if (timu.length == 0) {
                    div.innerHTML = `<div class="info">
                        <h3>提示：</h3><p>当前题库已全部出完，请刷新浏览器后重新生成题目！</p>
                        </div>`
                } else {

                    for (let i = 0; i < timu.length; i++) {
                        div.innerHTML += `<p> <span></span> ${timu[i]}</p>`;
                    }
                }


            })

        })

    </script>


</body>

</html>